<script lang="ts">
    import { type NodeProps } from "@xyflow/svelte";
    import NodeWrap from "../common/NodeWrap.svelte";
    import type { ExDrawNodeInfo } from "$lib/api/board/board_draw";
    import AsyncImage from "$lib/components/image/AsyncImage.svelte";
    import { drawStore } from "../../store.svelte";
    const props: NodeProps = $props();

    const nodeInfo = $derived(props.data as ExDrawNodeInfo);
</script>

<NodeWrap nodeProps={props} showBorder={false} showBgColor={false} showResizer>
    <div class="overflow-y-hidden h-full">
        <AsyncImage
            src={`fs:${drawStore.boardInfo?.image_fs_id ?? ""}/${nodeInfo.content.BasicImageContent?.file_id ?? ""}`}
            sizeClass="w-full"
        />
    </div>
</NodeWrap>
